<div class="control-group">
    <?php echo CHtml::label('Available Start Date', 'available_start_date', array('class' => 'control-label')); ?>
    <div class="controls">
        <?php
        $this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'name' => 'available_start_date',
            // additional javascript options for the date picker plugin
            'options' => array(
                'dateFormat' => 'M d, yy',
                'beforeShow' => 'js:function(input, inst) {
                        $(inst.input).datepicker("option", "minDate", new Date());
                        var maxDate = $("#available_end_date").val();
                        if (maxDate != "")
                            maxDate = new Date(maxDate);console.log(maxDate);
                        if (maxDate)
                            $(inst.input).datepicker("option", "maxDate", maxDate);
                    }'
            ),
            'htmlOptions' => array(
                'class' => 'date-picker available_start_date date-input',
                'readonly'=>'readonly',
                'style' => 'width: 120px;'
            ),
        ));?>
    </div>
</div>
<div class="control-group">
    <?php echo CHtml::label('Available End Date', 'available_end_date', array('class' => 'control-label')); ?>
    <div class="controls">
        <?php
        $this->widget('zii.widgets.jui.CJuiDatePicker', array(
            'name' => 'available_end_date',
            // additional javascript options for the date picker plugin
            'options' => array(
                'dateFormat' => 'M d, yy',
                'beforeShow' => 'js:function(input, inst) {
                        var minDate = $("#available_start_date").val();
                        if (minDate != "")
                            minDate = new Date(minDate);
                        if (!minDate)
                            minDate = new Date();
                        $(inst.input).datepicker("option", "minDate", minDate);
                    }'
            ),
            'htmlOptions' => array(
                'class' => 'date-picker available_end_date date-input',
                'readonly'=>'readonly',
                'style' => 'width: 120px;'
            ),
        ));
        ?>
    </div>
</div>
<!-- AVAILABLE START/END DATE PICKERS - END -->

<div class="control-group">
    <?php echo CHtml::label('On Sale', 'on_sale', array('class' => 'control-label')); ?>
    <div class="controls">
        <?php echo CHtml::checkBox('on_sale', false); ?>
    </div>
</div>
<div class="on_sale-input hide">
    <div class="control-group">
        <?php echo CHtml::label('On Sale Start', 'on_sale_start', array('class' => 'control-label')); ?>
        <div class="controls">
            <?php
            $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'name' => 'on_sale_start',
                // additional javascript options for the date picker plugin
                'options' => array(
                    'dateFormat' => 'M d, yy',
                    'beforeShow' => 'js:function(input, inst) {
        $(inst.input).datepicker("option", "minDate", new Date());
        var maxDate = $("#on_sale_end").val();
        if (maxDate != "")
            maxDate = new Date(maxDate);
        if (maxDate)
            $(inst.input).datepicker("option", "maxDate", maxDate);
    }'
                ),
                'htmlOptions' => array(
                    'class' => 'date-picker on_sale_start date-input',
                    'readonly'=>'readonly',
                    'style' => 'width: 120px;'
                ),
            ));
            ?>
        </div>
    </div>
    <div class="control-group">
        <?php echo CHtml::label('On Sale End', 'on_sale_end', array('class' => 'control-label',)); ?>
        <div class="controls">
            <?php
            $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'name' => 'on_sale_end',
                // additional javascript options for the date picker plugin
                'options' => array(
                    'dateFormat' => 'M d, yy',
                    'beforeShow' => 'js:function(input, inst) {
        var minDate = $("#on_sale_start").val();
        if (minDate != "")
            minDate = new Date(minDate);
        if (!minDate)
            minDate = new Date();
        $(inst.input).datepicker("option", "minDate", minDate);
    }'
                ),
                'htmlOptions' => array(
                    'class' => 'date-picker on_sale_end date-input',
                    'readonly'=>'readonly',
                    'style' => 'width: 120px;'
                ),
            ));
            ?>
        </div>
    </div>
</div>
<?php
cs()->registerScript('on-sale', '
$("#on_sale").bind("change",function(e){
    if($(this).is(":checked")){
        $(".on_sale-input").removeClass("hide");
    }else{
        $(".on_sale-input").addClass("hide");
    }
});
'); ?>